<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画函数</title>
    <style>
        .div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            }
    </style>

</head>
<body>
    <button>show</button>
    <button>hide</button>
    <button>toggle</button>
    <div class="div"></div>

    <script src="jquery-3.6.0.js"></script>
    <script>
        /*
            基本动画：
              1.show() 显示
              2.hide() 隐藏
              3.toggle() 切换
               =》本身显示就切换到隐藏
               =》本身隐藏就切换到显示
              + 对于以上三个函数都有相同的参数
               =》第一个参数表示运动时间
               =》第二个参数表示运动曲线
               =》第三个参数表示运动结束后的回调函数
         */

        $('button:nth-child(1)').click(function () {
            $('.div').show(
                1000,
                'linear',
                function () {
                    console.log('show 结束')
                }
            )
        })
        $('button:nth-child(2)').click(function () {
            $('.div').hide(
                1000,
                'linear',
                function () {
                    console.log('hide 结束')
                }
            )
        })
        $('button:nth-child(3)').click(function () {
            $('.div').toggle(
                1000,
                'linear',
                function () {
                    console.log('toggle 结束')
                }
            )
        })
    </script>
</body>
</html>